<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>

    <scroll 
    class="content" 
    ref="scroll" 
    @scroll="homeScroll" 
    :pullUpLoad="true"
    @pullingUp="loadMore"
    >
        <recommend-view :recommends="recommends"></recommend-view>

        <feature-view></feature-view>

        <tab-contorl :titles="['流行', '新款', '精选']" @tabClick="tabClick"></tab-contorl>

        <goods-list :goods="showGoods"></goods-list>
    </scroll> 

    <back-top @click.native="returnTop" v-show="isShow"></back-top> 
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import RecommendView from "views/home/RecommendView";
import FeatureView from "views/home/FeatureView";
import TabContorl from "components/content/tabContorl/TabContorl";
import Scroll from 'components/common/scroll/Scroll';
import GoodsList from "components/content/goods/GoodsList";
import BackTop from 'components/content/backTop/BackTop';
import { getHomeMultiData, getHomeGoods } from "network/home.js";
import {debounce} from 'common/utils.js'
export default {
  components: {
    NavBar,
    RecommendView,
    FeatureView,
    TabContorl,
    GoodsList,
    Scroll,
    BackTop
  },
  data() {
    return {
      result: null,
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentType:'pop',
      isShow:true,
      tabOffsetTop:0
    };
  },
  computed:{
      showGoods(){
        return this.goods[this.currentType].list
      }
  },
  methods: {
    // 事件监听相关方法
    tabClick(index){
      switch(index){
        case 0:
          this.currentType='pop'
          break
        case 1:
          this.currentType='new'
          break
        case 2:
          this.currentType='sell'
          break
      }
    },
    returnTop(){
      this.$refs.scroll.scroll.scrollTo(0,0,500)
    },
    homeScroll(position){
      // console.log(position)
      this.isShow=-position.y>1000
    },
    loadMore(){
      // console.log('上拉加载更多')
      this.getHomeGoods(this.currentType)
      // this.$refs.scroll.scroll.refresh()
    },
    // 网络请求相关方法
    getHomeMultiData() {
      // 1.请求多个数据
      getHomeMultiData().then((res) => {
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      // 2.请求商品数据
      let page = this.goods[type].page + 1;
      getHomeGoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page += 1;
        this.$refs.scroll.scroll.finishPullUp()
      });
    },
  },
  created() {
    this.getHomeMultiData();
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },
  mounted() {
    const refresh=debounce(this.$refs.scroll.refresh,500)
    this.$bus.$on('itemImageLoad',()=>{
      // this.$refs.scroll.scroll.refresh()
      refresh()
    })
  }
};
</script>
<style scoped>
#home {
  padding-top: 44px;
  height: 100vh;
  position: relative;
}
.home-nav {
  background: rgb(255, 136, 143);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}

.content{
  overflow: hidden;
  position: absolute;
  top:44px;
  bottom: 49px;
  left: 0;
  right: 0; 
}
/* .content{
  height:calc(100%-93px);
  overflow: hidden; 
  margin-top:44px;
} */
</style>
